<template>
	<div class="alertBox">
		<div class="alertBk"></div>
		<div class="wordBox">
			<div class="alertHead">
				<p class="tittle">批量导入</p>
				<div class="myClose" @click="closeExport">
					<img src="~_assets/close.png" class="myClose" />
				</div>
			</div>
			<div class="alertBody">
				<div class="changeDiv">
            <a :href="PIC_URL + excelUrl">
              <div class="downLoadBtn">
                <img src="~_assets/download.png"/>
                <p class="downLoadP">下载模板</p>
              </div>
            </a>
					<el-upload
						class="exportBtn"	
						:limit="1"
						:action="fileUpload"
						:show-file-list='true'
						:data="fileData"
						:on-success="exportSuccess"
						:before-upload="beforeExportUpload">
						<img src="~_assets/export.png"/>
						<p class="exportP">批量导入</p>
					</el-upload>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { GROUP_UPLOAD } from "@/config/url";
export default {
  props: ["items"],
  watch: {
    items(value) {
      this.fileData = {
        groupId: value.id
      };
    }
  },
  data() {
    return {
      fileUpload: GROUP_UPLOAD,
      fileData: {},
      excelUrl:'/activity/优惠分组成员导入模板.xlsx',//模板地址
    };
  },
  methods: {
    closeExport() {
      this.$emit("closeExport");
    },
    exportSuccess(res) {
      this.$message({
        showClose: true,
        message: res.data
	  });
	  this.closeExport();
	  this.$parent.searchRoleList();
    },
    beforeExportUpload(file) {}
  }
};
</script>

<style>
input[type="file"] {
  display: none;
}
.exportBtn .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 154px;
}
.downLoadBtn,
.exportBtn {
  width: 140px;
  height: 154px;
  border-radius: 8px;
  margin-left: 0.3rem;
  cursor: pointer;
  margin-bottom: 0.2rem;
}
.downLoadBtn {
  border: 1px dashed rgba(169, 208, 255, 1);
}
.exportBtn {
  background: rgba(169, 208, 255, 1);
}
.downLoadBtn img {
  margin-top: 0.18rem;
  margin-left: 0.24rem;
}
.exportBtn img {
  margin-top: 0.18rem;
}
.downLoadBtn p,
.exportBtn p {
  text-align: center;
  margin-top: 0.1rem;
}
.downLoadP {
  color: #2d3343;
}
.exportP {
  color: #fff;
}
</style>